$map: (
  justify: (center,flex-start,flex-end,space-around,space-between),
  align: (flex-start,flex-end, center),
);
.row{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  @each $item in map-get($map: $map, $key: justify) {
    &.row-justify-#{$item}{
      justify-content: $item;
    }
  }
  @each $item in map-get($map: $map, $key: align) {
    &.row-align-#{$item}{
      justify-content: $item;
    }
  }
}

$cols: 4;
$oneWidth: 100% / $cols;
.col{
  flex: 1;
  @for $i from 1 to $cols+1 {
    &.col-#{$i}{
      width: $oneWidth * $i;
    }
  }
}